<template>
  <div style="max-width: 1200px; margin: 0 auto">
    <el-backtop></el-backtop>
    <!-- <el-affix :offset="0"> -->

    <div style="background-color: white; float: left; width: 100%">
      <div style="float: left; width: 300px; float: left">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
      </div>

      <el-select
        v-model="tag_value"
        multiple
        placeholder="标签筛选"
        style="width: 600px; margin-top: 15px; float: right"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-divider style="float: left"></el-divider>
    </div>

    <!-- </el-affix> -->
    <div
      style="margin-bottom: 25px"
      v-for="(data, i) in tableData"
      :key="i"
      v-show="data.show"
    >
      <div>
        <el-descriptions title="" :column="5" border
          ><el-descriptions-item
            label="结果"
            label-align="left"
            align="center"
            label-class-name="my-label"
            width="70px"
          >
            
            <span v-html="data.result"></span>
          </el-descriptions-item>
          <el-descriptions-item
            label="用例名称"
            label-align="right"
            align="center"
            label-class-name="my-label"
            width="90px"
          >
            <span v-html="data.casename"></span
          ></el-descriptions-item>
        </el-descriptions>
      </div>

      <el-table
        :data="data.step.filter((data) => check(data))"
        size="small"
        stripe
        :cell-style="cellStyle"
        style="
          width: 100%;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        "
      >
        <el-table-column prop="res" label="状态" width="90"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="time" label="耗时" width="100">
        </el-table-column>
        <el-table-column label="标签">
          <template #default="scope">
            <el-tag
              v-for="item in scope.row.tag"
              :label="item"
              :key="item"
              style="margin-right: 3px"
              >{{ item }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small" v-if="checkrow(scope.row)"
              >查看</el-button
            ><span v-else v-html="scope.row.msg"></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="dialogVal.name"
      v-model="centerDialogVisible"
      width="70%"
      destroy-on-close
      :close-on-click-modal="false"
      center
    >
      <el-descriptions
        class="margin-top"
        title="请求"
        :column="1"
        :size="'small'"
        border
      >
        <!-- <template #extra>
          <el-button type="primary" size="small">复制成cURL</el-button>
        </template> -->
        <el-descriptions-item
          class="mm1"
          label-class-name="deslabel"
          class-name="descontent"
        >
          <template #label>
            <span v-html="dialogVal.req.method"></span>
          </template>
          <span v-html="dialogVal.req.url"></span
        ></el-descriptions-item>
        <el-descriptions-item
          class="mm1"
          label-class-name="deslabel"
          class-name="descontent"
          v-if="Object.keys(dialogVal.req.header).length > 0"
        >
          <template #label>
            <span>Header</span>
          </template>
          <span v-for="(h, h1) in dialogVal.req.header" :key="h"
            ><span v-html="h1 + ': ' + h"></span><br /></span
        ></el-descriptions-item>
        <el-descriptions-item
          class="mm1"
          label-class-name="deslabel"
          v-if="dialogVal.req.body.length > 0"
          class-name="descontent"
        >
          <template #label>
            <span>Body</span>
          </template>
          <span v-html="dialogVal.req.body"></span
        ></el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="margin-top"
        title="响应"
        :column="1"
        :size="'small'"
        border
        style="margin-top: 20px"
      >
        <template #extra>
          <el-button type="primary" size="small" @click="showjson"
            >结果格式转换</el-button
          >
        </template>
        <el-descriptions-item
          class="mm1"
          label-class-name="deslabel"
          class-name="descontent"
        >
          <template #label>
            <span v-html="dialogVal.result"></span>
          </template>
          <span v-html="dialogVal.msg"></span
        ></el-descriptions-item>
        <el-descriptions-item
          class="mm1"
          label-class-name="deslabel"
          class-name="descontent"
        >
          <template #label>
            <span v-html="dialogVal.res.status_code"></span>
          </template>
          <span v-html="dialogVal.res.reason"></span
        ></el-descriptions-item>
        <el-descriptions-item
          class="mm1"
          label-class-name="deslabel"
          class-name="descontent"
          v-if="Object.keys(dialogVal.res.header).length > 0"
        >
          <template #label>
            <span>Header</span>
          </template>
          <span v-for="(h, h1) in dialogVal.res.header" :key="h"
            ><span v-html="h1 + ': ' + h"></span><br /></span
        ></el-descriptions-item>
        <el-descriptions-item
          class="mm1"
          label-class-name="deslabel"
          v-if="dialogVal.res.body.length > 0"
          class-name="descontent"
        >
          <template #label>
            <span>Body</span>
          </template>

          <pre
            v-html="dialogVal.res.body"
            style="
              white-space: normal;

              padding-right: 0 !important;

              padding-left: 0 !important;
            "
          ></pre>
        </el-descriptions-item>
      </el-descriptions>
      <div style="margin-top: 20px">
        <span style="font-weight: 700; font-size: 26px; color: #303133"
          >校验</span
        >
        <el-table :data="dialogVal.check" style="width: 100%" border
        :cell-style="cellStyle"
        >
          <el-table-column prop="res" label="结果" width="60">
          </el-table-column>
          <el-table-column prop="position" label="位置" width="115">
          </el-table-column>
          <el-table-column prop="key" label="关键词" width="120">
          </el-table-column>
          <el-table-column prop="type" label="操作" width="80">
          </el-table-column>
          <el-table-column prop="val" label="期望值" width="100">
          </el-table-column>
          <el-table-column prop="realval" label="实际值"> </el-table-column>
          <el-table-column prop="msg" label="备注"> </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
          <el-button type="primary" @click="centerDialogVisible = false"
            >关闭</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
const cityOptions = ["成功", "失败", "错误", "跳过"];

export default {
  data() {
    return {
      checkAll: true,
      checkedCities: ["成功", "失败", "错误", "跳过"],
      cities: cityOptions,
      isIndeterminate: false,
      centerDialogVisible: false,
      showTypeButton: true,
      dialogVal: {},
      tableData: [
      ],
      tableData1: [
        {
          casename: "fhajkshajksh",
          show: true,
          result: "成功",
          step: [
            {
              id: 0,
              res: "成功",
              name: "asdlkasjdklajsdk",
              time: "1231ms",
              tag: ["12312", "sdasd"],
            },
            {
              id: 1,
              res: "失败",
              name: "asdlkasjdklajsdk",
              time: "1231ms",
              tag: [],
              msg:'1231231msg'
            },
          ],
        },
        {
          casename: "fhajkshajksh",
          show: true,
          step: [
            {
              res: "错误",
              name: "asdlkasjdklajsdk",
              time: "1231ms",
              tag: ["12312", "sdasd"],
              msg:'1231231msg'
            },
          ],
        },
        {
          id: 2,
          casename: "fhajkshajksh",
          show: true,
          step: [
            {
              res: "跳过",
              name: "asdlkasjdklajsdk",
              time: "1231ms",
              tag: ["sdasd"],
            },
          ],
        },
        {
          id: 3,
          casename: "fhajkshajksh",
          show: true,
          step: [
            {
              res: "成功",
              name: "asdlkasjdklajsdk",
              time: "1231ms",
              tag: ["12312"],
            },
          ],
        },
      ],
      allHttpData: [
      ],
      allHttpData1: [
        {
          name: "name123",
          result:"111",
          msg:'122',
          req: {
            method: "POST",
            url: "1q2131231211111111111111111111111111112jklhjkh1jkh2222222/22222222222222222222222:!222222222222222111111111111111111111111111111111111111111111111111111111111111111111111111111111?1212&1222222212",
            header: {
              xxx: "yyy",
              xx1x: "y1yy",
              xx2x: "yy2y",
            },
            body: "123123123",
          },
          res: {
            result: "成功",
            msg: "111",
            status_code: 200,
            reason: "1212",
            header: {
              xxx: "yyy",
              xx1x: "y1yy",
              xx2x: "yy2y",
            },
            body: '{"result":{"auditstatus":2,"authorname":"阅文漫画","bannerimg":"http://public-1252317822.image.myqcloud.com/banner/7868392504959101/banner.jpg","cMID":7868392504959101,"cPID":2000000023,"categoryid":50001,"cauthorid":0,"chargetype":1,"checklevel":15,"checktime":"2017-08-14 19:12:45","coverurl":"http://cover-1252317822.image.myqcloud.com/qdbimg/349573/m_7868392504959101/0","createtime":"2017-06-29 16:38:45","drawscript":"","freetype":3,"intro":"双月当空，无限可能的英魂世界 \r\n　　孤寂黑暗，神秘古怪的嬉命小丑 \r\n　　百城联邦，三大帝国，异族横行，魂兽霸幽 \r\n　　这是一个英雄辈出的年代，人类卧薪尝胆重掌地球主权，孕育着进军高纬度的野望！ \r\n　　重点是……二年级的废柴学长王同学，如何使用嬉命轮盘，撬动整个世界，学妹们，请注意，学长来了！！！\r\n      周二周六，一周双更！！！  ","lastcuttime":"1970-01-01 08:00:00","newhuaid":45499958572846780,"newhuatime":"2020-05-19 09:00:00","status":2,"subcategoryid":50002,"supervisor":"","tag":"50027,50041","textscript":"","title":"斗战狂潮","totalamount":0,"totalhuas":348,"translator":"","type":2,"unitprice":49,"update_plan":"","updatetime":"2021-08-10 11:29:44","vipstatus":1, "viptime":"2017-06-29 16:38:45"}, "returnCode":0,"returnMsg":"Success"}', //.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp')
          },
          check: [
            {
              res: "成功",
              position: "header",
              key: "ashdkjhsk",
              type: "等于",
              val: "1231231",
              realval: "123123",
              msg: "123123",
            },
            {
              res: "成功",
              position: "header",
              key: "ashdkjhsk",
              type: "等于",
              val: "1231231",
              realval: "123123",
              msg: "123123",
            },
          ],
        },
      ],
      options: [
      ],
          options1: [
        {
          value: "12312",
          label: "12312",
        },
        {
          value: "sdasd",
          label: "sdasd",
        },
      ],
      tag_value: [],
    };
  },
  watch: {
    tag_value(val) {
      if (val.length == 0 && this.checkAll) {
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].show = true;
        }
      } else {
        for (i = 0; i < this.tableData.length; i++) {
          var tmp = false;
          for (var j = 0; j < this.tableData[i].step.length; j++) {
            if (this.check(this.tableData[i].step[j])) {
              tmp = true;
              break;
            }
          }

          this.tableData[i].show = tmp;
        }
      }
    },
    checkedCities(val) {
      if (val.length == 4 && this.checkAll && this.tag_value.length == 0) {
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].show = true;
        }
      } else {
        for (i = 0; i < this.tableData.length; i++) {
          var tmp = false;
          for (var j = 0; j < this.tableData[i].step.length; j++) {
            if (this.check(this.tableData[i].step[j])) {
              tmp = true;
              break;
            }
          }

          this.tableData[i].show = tmp;
        }
      }
    },
    check_value1(val) {
      // console.log(1,val)
      this.checkedCities = [val];
      this.checkAll = false;
      this.isIndeterminate = true;
    },
  },
  props: {
    check_value1: String,
  },
  methods: {
    checkrow(a){
      if(a.res!="跳过" && a.res!="错误"){
return true;
      }
      return false;
    },
    showjson() {
      if (this.showTypeButton) {
        this.dialogVal.res.body = this.jsonShowFn(this.dialogVal.res.body);
      } else {
        this.dialogVal.res.body = this.dialogVal.res.oldbody;
      }
      this.showTypeButton = !this.showTypeButton;
    },
    check(data) {
      // console.log(data);
      // console.log(this.tag_value)
      if (this.checkedCities.indexOf(data.res) != -1) {
        if (this.tag_value.length == 0) {
          return true;
        } else {
          var has_tag = false;
          for (var tag of data.tag) {
            if (this.tag_value.indexOf(tag) != -1) {
              has_tag = true;
            }
          }
          return has_tag;
        }
      }

      return false;
    },
    cellStyle(row) {
      if (row.columnIndex == 0) {
        // console.log(row.row.res);
        if (row.row.res == "成功") {
          return " background: lawngreen;font-size: 15px;font-weight: 800;text-align:center;color:#555555;";
        } else if (row.row.res == "失败") {
          return " background: #FF0000;color:#ffffff;font-size: 15px;font-weight: 800;text-align:center;";
        } else if (row.row.res == "错误") {
          return " background: yellow;color:#333333;font-size: 15px;font-weight: 800;text-align:center;";
        } else if (row.row.res == "跳过") {
          return " background: lightgrey;color:#666666;font-size: 15px;font-weight: 800;text-align:center;";
        }
      }
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleCheckAllChange(val) {
      // console.log(val, 2);
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // console.log(value, 1);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleClick(a) {
      var cid = a.id;
      this.dialogVal = this.allHttpData[cid];
      this.dialogVal.res.body = this.allHttpData[cid].res.body
        .replace(/\n/g, "\\n")
        .replace(/\r/g, "")
        .replace(/\t/g, "  ");
      this.dialogVal.res.oldbody = this.allHttpData[cid].res.body
        .replace(/\n/g, "\\n")
        .replace(/\r/g, "")
        .replace(/\t/g, "  ");
      this.centerDialogVisible = true;
    },
    jsonShowFn(json) {
      try {
        json = JSON.parse(json);
      } catch (err) {
        console.log(err);
        return json;
      }

      if (typeof json != "string") {
        // console.log(typeof json);
        json = JSON.stringify(json, null, 2);
      }
      json = json
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;");
      // console.log(json);

      var cc = json
        .replace(/\n/g, "<br>")
        .replace(/\s/g, "&nbsp")
        .replace(
          /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\\-]?\d+)?)/g,
          function (match) {
            var cls = "number";
            if (/^"/.test(match)) {
              if (/:$/.test(match)) {
                cls = "key";
              } else {
                cls = "string";
              }
            } else if (/true|false/.test(match)) {
              cls = "boolean";
            } else if (/null/.test(match)) {
              cls = "null";
            }
            return '<span class="' + cls + '">' + match + "</span>";
          }
        );
      // console.log(cc)
      return cc;
    },
  },
};
</script>

<style>
.el-checkbox-button__inner {
  margin-right: 2px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 8px;
}
.el-card__header {
  padding: 0;
}
.deslabel {
  width: 100px;
}
.descontent {
  font-size: 14px;
  font-weight: 520;
}
/* pre {
  outline: 1px solid #ccc;
} */
.string {
  color: green;
}
.number {
  color: darkorange;
}
.boolean {
  color: blue;
}
.null {
  color: magenta;
}
.key {
  color: red;
}
</style>